<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" href="css/el-index.css"/>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
<div id="father">
    <h2>注册页面</h2>
    <el-form ref="userRegisterForm" :model="user" label-width="40px" enctype="multipart/form-data">
        <el-form-item label="账号" prop="username">
            <el-input type="text" v-model="user.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
            <el-input type="text" v-model="user.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="头像">
            <input type="file" name="file" id="file" @change="upload">
        </el-form-item>
        <el-form-item>
            <el-row>
                <el-button type="primary" @click="submitRegisterForm('userRegisterForm')">注册</el-button>
                <el-button @click="resetLoginForm('userRegisterForm')">重置</el-button>
            </el-row>
        </el-form-item>
    </el-form>
    <div id="bottom">
        <a href="login.html">已有账号，请直接登录</a>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/el-index.js"></script>
<script src="js/axios.min.js"></script>
<script>
    //注意：先创建表单对象---用于装入我们的数据
    var formData = new FormData();
    //创建vue对象
    var app = new Vue({
        //挂载点
        el:"#father",
        //数据
        data:{
            //用户对象
            user:{}
        },
        //方法
        methods:{
            //文件上传--把文件装入到我们自定义的表单数据
            upload(event){
                var file = event.target.files[0];
                formData.append("file",file);
                console.log(formData.get("file").name);
            },
            //提交注册表单
            submitRegisterForm(formName){
                //把数据装入到我们自定义的表单数据
                formData.append("username",this.user.username);
                formData.append("nickname",this.user.nickname);
                formData.append("password",this.user.password);
                //执行ajax提交
                axios.post("user/add",formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }}).then(
                    function (res) {
                        console.log(res);
                        if(res.data.message=="200"){
                            location.href="login.html";
                        }
                    }
                )
            },
            //重置登录表单
            resetLoginForm(formName){
                //固定写法--调用vue的函数-重置字段
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</body>
</html>